<script setup>
import { MarkerType, useVueFlow } from '@vue-flow/core';
import { ref } from 'vue';

const props = defineProps({
  edge: {
    type: Object,
    required: true,
  },
})

const {
  updateEdge,
  onEdgeUpdate
} = useVueFlow()

const instance = useVueFlow()

console.log(props.edge.id)
const edge = instance.findEdge(props.edge.id)

// const currEdge = ref(props.edge)


console.log(edge)

const edgeLabel = ref()
const edgeAnimated = ref(true)
const edgeMarkerEnd = ref(MarkerType.ArrowClosed)

// watch(edgeLabel, val => {
//   currEdge.value.label = val
//   updateEdge(currEdge.value, currEdge.value)
// })
// watch(edgeAnimated, val => {
//   currEdge.value.animated = val
//   updateEdge(currEdge.value, currEdge.value)
// })
// watch(edgeMarkerEnd, val => {
//   if(val == 'Arrow'){
//     currEdge.value.markerEnd = MarkerType.Arrow
//   }else{
//     currEdge.value.markerEnd = MarkerType.ArrowClosed
//   }
//   updateEdge(currEdge.value, currEdge.value)
// })

onEdgeUpdate((event, edge) => {
  console.log('onEdgeUpdate', event)
  console.log('onEdgeUpdate', edge)
})
</script>

<template>
  <div class="edge-controls">
    <div class="m-2">
      <label class="label">
        <VsInput  
          id="draggable"
          v-model="edgeLabel"
          label-placeholder="路径名称"
        />
      </label>
    </div>
    <div class="m-2">
      <label class="label">
        <VsCheckbox v-model="edgeAnimated">
          开启动画
        </VsCheckbox>
      </label>
    </div>
    
    <div class="m-2">
      <span>
        <VsRadio
          class="edge-marker"
          v-model="edgeMarkerEnd"
          vs-name="radios1"
          vs-value="ArrowClosed"
        >
          箭头关闭
        </VsRadio>
        <VsRadio
          v-model="edgeMarkerEnd"
          vs-name="radios1"
          vs-value="Arrow"
        >
          箭头
        </VsRadio>
      </span>
    </div>
  </div>
</template>

<style>
.edge-marker{
  float: inline-start;
}

.edge-controls{
  position:absolute;
  z-index:4;
  padding:8px;
  background-color:#fff;
  border-end-start-radius:10px;
  font-size:11px;
  inset-block-start: 15px;
  inset-inline-end: 48px;
}

.edge-controls .label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  gap:5px
}

.edge-controls .label input{
  cursor:pointer
}
</style>
